{% extends '_base_create_update.html' %}

{% block top_css %}
    {{ super() }}
    <!--Treeview-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/bootstrap-treeview/css/bootstrap-treeview.min.css') }}">
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">
{% endblock %}


<!-- Content head -->
{% block head_title %}
    系统管理
{% endblock %}
{% block head_nav %}
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">资产管理</a></li>
        <li class="active">资产信息</li>
    </ol>
{% endblock %}

<!-- Content body -->
{% block body_title %}
    新增资产信息
{% endblock %}

{% block body_form %}
    <form name="assetForm" action="" class="form-horizontal">
        <div class="panel-body">
            <p class="bord-btm pad-ver text-main text-bold">资产信息</p>

            <div class="row">
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>主机名称</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="hostname" value="{{ hostname }}" placeholder="请填写主机名称" data-rule="主机名称: required;" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                   <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>系统平台</label>
                            <div class="col-lg-8">
                                <select class="select2 form-control" name="platform" data-placeholder="请填写系统平台" data-rule="系统平台: required;">
                                    <option value=""></option>
                                    <option value="Linux" {% if platform == 'Linux' %} selected {% endif %} >Linux</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                     <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>连接协议</label>
                            <div class="col-lg-8">
                                <select class="select2 form-control" name="protocol" value="{{ protocol }}" data-placeholder="请选择连接协议" data-rule="连接协议: required;">
                                    <option value=""></option>
                                    <option value="ssh" {% if protocol == 'ssh' %} selected {% endif %} >ssh</option>
                                </select>
                            </div>

                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                     <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>连接端口</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="port" value="{{ port }}" placeholder="请填写协议端口" data-rule="协议端口: required;" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                     <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>管理IP</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="manage_ip" value="{{ manage_ip }}" placeholder="请填写管理IP" data-rule="管理IP: required;" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>所属节点</label>
                            <div class="col-lg-8">
                                <div class="menu-wrap">
                                    <div class="menu-select">
                                        <select class="form-control" name="nodes" data-rule="所属节点: required;" autocomplete="off">
                                        </select>
                                        <span class="form-control collapse">请选择所属节点</span>
                                    </div>
                                    <div class="menu-tree"></div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                     <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger"></span>公网IP</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="public_ip" value="{{ public_ip }}" placeholder="请填写公网IP" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                   <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">*</span>管理用户</label>
                            <div class="col-lg-8">
                                <select class="select2 form-control" name="admin_user_id" data-placeholder="请选择管理用户">
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                   <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger"></span>所属标签</label>
                            <div class="col-lg-8">
                                <select class="select2 form-control" name="labels" data-placeholder="请选择所属标签" multiple>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>

        <div class="panel-footer">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-6">
                    <div class="col-sm-7 col-sm-offset-3">
                        <button class="btn btn-mint pull-right submit-btn" type="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}



{% block buttom_js %}
    {{ super() }}
    <!--Treeview-->
    <script src="{{ url_for('static', filename='plugins/bootstrap-treeview/js/bootstrap-treeview.min.js') }}"></script>
    <!--bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>

    <script type="text/javascript">

        $(function () {
            var selected = [];
            {% for node in nodes %}
                selected.push({
                    'id': "{{ node.id }}",
                    'text': "{{ node.value }}"
                });
            {% endfor %}

            (function () {
                $.ajax({
                    type: 'get',
                    url: '{{ url_for('assets.api-node-tree') }}?type=2',
                    success: function (nodes) {
                        bees.initNodeTree($(".menu-tree"), {data: nodes}, selected);
                    }
                });
            })();


            bees.initSelect2({
            });

            bees.initServerSideSelect2(
                $('select[name="admin_user_id"]'),
                {
                    url: '{{ url_for('assets.api-adminuser-list') }}',
                    selected: '{{ admin_user_id }}'
                }
            );

            var $formEle = $('form[name="assetForm"]');
            bees.niceValidate($formEle);
            $formEle.on("valid.form", function () {
                setAjaxCSRFToken();

                var options = $('select[name="nodes"] option');
                var nodes = [];
                $.each(options, function (i, o) {
                    nodes.push($(o).val());
                });

                var labels = $('select[name="labels"]').select2('val');
                $.ajax({
                    type: 'post',
                    url: '{{ url_for("assets.asset-update", pk=default_pk) }}'.replace(bees.defaultPK, '{{ id }}'),
                    data : {
                        'hostname': $('input[name="hostname"]').val(),
                        'platform': $('select[name="platform"]').val(),
                        'protocol': $('select[name="protocol"]').val(),
                        'port': $('input[name="port"]').val(),
                        'manage_ip': $('input[name="manage_ip"]').val(),
                        'public_ip': $('input[name="public_ip"]').val(),
                        'admin_user_id': $('select[name="admin_user_id"]').select2('val'),
                        'nodes': nodes.join(','),
                        'labels': labels.join(',')
                    },
                    success: function (result) {
                        if (result.code != 200) {
                            $formEle.find('*[name='+ result.data.field +']').focus().addClass('has-error');
                            bees.tipError({
                                message: result.data.message
                            });
                        }else {
                            bees.tipInfo({
                                message: '更新成功'
                            });
                            window.location.href = '{{ url_for("assets.asset-list") }}'
                        }
                    }
                });
            });

        })

    </script>

{% endblock %}
